<template>
	<view :class="['ff-icon', ...iconClasss]" :style="iconStyles">
		<text :class="['ff-icon-content', ...iconContentClasss]" :style="iconContentStyles"></text>
	</view>
</template>

<script>
	export default {
		name: "ff-icon",
		components: {},
		props: {
			name: {
				type: String,
			},
			fontFamily: {
				type: String,
				default: 'ff-iconfont'
			},
			size: {
				type: String,
				default: '40rpx'
			},
			color: {
				type: String,
				default: '#606266'
			},
			rotate: {
				type: String,
				default: '0deg'
			},
			lastRotate: {
				type: Boolean,
				default: false
			},
			rotateSpeed: {
				type: String,
				default: '2s'
			},
		},
		data() {
			return {
				template: {},
			};
		},
		computed: {
			iconClasss() {
				let classs = []
				if (this.lastRotate === true) {
					classs.push('ff-icon-rotate')
				}
				return classs
			},
			iconStyles() {
				let styles = {
					'transform': 'rotate(' + this.rotate + ')',
					'animation-duration': this.rotateSpeed,
				}
				return styles
			},
			iconContentClasss() {
				let classs = [
					this.iconName,
					this.fontFamily
				]
				return classs
			},
			iconContentStyles() {
				let styles = {
					'color': this.color,
					'font-size': this.size,
				}
				return styles
			},
			iconName() {
				for (let i = 0; i < Object.keys(uni.$ff.config.icons).length; i++) {
					if (this.name == Object.keys(uni.$ff.config.icons)[i]) {
						this.template = uni.$ff.config.icons[this.name]
						return uni.$ff.config.icons[this.name].name
					}
				}
				this.template = {
					name: this.name
				}
				return this.name
			},
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../librarys/css/components.css";
	@import "../../common/font_4539014_15wp1wc77hz/iconfont.css";

	.ff-icon {
		display: inline-flex;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.ff-icon-content {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	@keyframes ff-icon-rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.ff-icon-rotate {
		animation-name: ff-icon-rotate;
		animation-duration: 2s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
</style>